<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <div class="c-container">
    <!-- 搜索-->
    <!-- todo whf search可以做成组件-->
    <el-input v-if="showSearch" :placeholder="searchPlaceHolder"
              v-model="inputContent"
              class="sc-container"
              @input="inputChange"
              @keyup.enter="searchInput">
      <template v-slot:append>
        <el-button type="primary" v-on:click="searchInput">搜索</el-button>
      </template>
    </el-input>
    <div class="right-container">
      <!-- 新建xxxx -->
      <el-button v-if="canSave" class="xr-btn--orange" icon="el-icon-plus" type="primary" @click="createClick">
        {{ addBtnText }}
      </el-button>
      <!-- 一个插槽，目前看在回款计划管理中用到了。  -->
      <slot name="ft"/>
      <!-- 查重  -->
      <el-button v-if="showDupCheck" class="dup-check-btn" @click="dupCheckShow = true">查重</el-button>
      <!-- 下拉框，执行moreTypes中的操作，其实moreTypes中就是导入导出 -->
      <el-dropdown v-if="moreTypes.length > 0" trigger="click" v-on:command="handleTypeDrop">
        <el-button icon="el-icon-more"/>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <!--v-bind:icon="wkIconPre(item.icon)"-->
            <el-dropdown-item v-for="(item, index) in moreTypes" v-bind:key="index" v-bind:command="item.type">
              {{ item.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 查重 -->
    <!-- todo whf 这个稍后再处理-->
    <DuplicateCheckSingle v-model:visible="dupCheckShow"></DuplicateCheckSingle>
  </div>
</template>

<script setup>
import {computed, getCurrentInstance, onBeforeUnmount, reactive, ref, toRef} from "vue"
import {useErpUserStore} from "../../../../../store/modules/usererp.js";
import {crmOptionKey} from "../keys.js";
import DuplicateCheckSingle from "/src/views/crm/componentsNew/DuplicateCheckNew/index.vue"

defineOptions({
  name: 'SzListHeadSingle'
})

// 自定义方法
const properties = defineProps({// 传入自定义的创建函数
  createFun: Function,
  // 新增按钮的文案
  addBtnText: {
    type: String,
    default: ''
  },
  // 搜索框中的字符
  searchPlaceHolder: {
    type: String,
    default: '请输入内容'
  },
  // 是否显示搜索
  showSearch: {
    type: Boolean,
    default: true
  },
  // 用于联动
  search: String,
})

const emits = defineEmits({
  'on-import-done': null, //导入完成
  'on-search': null,  // 开始搜索
  'update:search': null, //更新search内容
  "on-export": null    //导出动作
})
// CRM类型
const crmOption = inject(crmOptionKey)

// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus
const $wkImport = cxt.appContext.config.globalProperties.$wkImport


// 输入框引用
const inputContent = ref('')
// 创建的相关信息
const createActionInfo = reactive({type: 'save'})
const createCRMType = ref('')

// 查重
const dupCheckShow = ref(false)

/**
 * 如果传递了新建函数，使用外部组件传递的函数。否则使用默认的新建动作
 */
function createClick() {
  if (properties.createFun) {
    // 如果传入了自定义的创建函数，那么就使用外部传入的函数
    properties.createFun()
  } else {
    createCRMType.value = crmOption.crmType
    createActionInfo.value = {type: 'save'}
  }
}

const titleIcon = computed(() => {
  return `/src/assets/img/crm/${crmOption.crmType}.png`
})


const canSave = computed(() => {
  // 如果是公海，不允许新建。公海的客户只能来自状态的改变
  if (crmOption.isSeas) {
    return false
  }
  console.log("crm", crm)
  console.log("crm", crmOption.crmType)
  console.log("crm", crm.value[crmOption.crmType].save)
  return crm.value[crmOption.crmType].save
})

const showDupCheck = computed(() => {
  return ['leads', 'customer', 'contacts'].includes(crmOption.crmType) && !crmOption.isSeas
})

// 更多操作
const moreTypes = computed(() => {
  const moreTypes = []
  // 先判断是否有导入权限
  let importAuth = crm.value[crmOption.crmType] && crm.value[crmOption.crmType].excelimport
  // 如果是公海并且有公海池id，判断公海的导入权限
  if (crmOption.isSeas && crmOption.poolId) {
    importAuth = crmOption.poolAuth && crmOption.poolAuth.excelexport
  }
  if (importAuth) {
    moreTypes.push({type: 'import', name: '导入', icon: 'import'})
  }

  // 先判断是否有导出权限
  let exportAuth = crm.value[crmOption.crmType] && crm.value[crmOption.crmType].excelexport
  // 如果是公海，并且有公海池id，判断公海的导出权限
  if (crmOption.isSeas && crmOption.poolId) {
    exportAuth = crmOption.poolAuth && crmOption.poolAuth.excelexport
  }
  if (exportAuth) {
    moreTypes.push({type: 'export', name: '导出', icon: 'export'})
  }
  return moreTypes
})

const crm = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.crm;
})

const userInfo = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.userInfo;
})

function inputChange() {
  emits('update:search', inputContent)
}

// 进行搜索操作
function searchInput() {
  emits('on-search', inputContent)
}

function handleTypeDrop(command) {
  if (command == 'export') {
    // 导出
    emits('on-export')
  } else if (command == 'import') {
    // 导入
    $wkImport.importFile(crmOption.crmType, {
      ownerSelectShow: false, // 去除选择负责人逻辑
      poolSelectShow: crmOption.isSeas,
      userInfo: userInfo.value
    })
  }
}


// 监听导入
function onImportDone(type) {
  if (crmOption.crmType == type) {
    emits('on-import-done')
  }
}

// 监听导入。
// 此时收到导入窗口发送的import-crm-done-bus事件。对应的，此时导入窗口执行的是关闭closeView事件
bus.on("import-crm-done-bus", onImportDone);

// const cc = inject(loadingKey)
// console.log("cc",cc)

onBeforeUnmount(() => {
  bus.off('import-crm-done-bus')
})
</script>


<style lang="scss" scoped>
.c-container {
  height: 60px;
  position: relative;

  .sc-container {
    width: 300px;
    margin: -16px 0 0 -150px;
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .el-input {
    :deep(.el-input-group__append) {
      background-color: $xr-color-primary;
      border-color: $xr-color-primary;
      color: white;
    }
  }

  .right-container {
    margin-right: -10px;
    float: right;
    margin: 15px 20px 0 0;
    position: relative;

    .dup-check-btn,
    .xr-btn--orange {
      margin-left: 0;
      margin-right: 10px;
    }

    .right-item {
      float: left;
      margin-right: 10px;
      padding: 8px 10px;
      font-size: 13px;
      border-radius: 2px;
    }
  }
}
</style>
